import React from 'react';

export default function DetailSkeleton() {
  return (
    <div className="animate-pulse">
      {/* 面包屑导航 */}
      <div className="flex items-center space-x-2 text-gray-400 text-sm mb-4">
        <div className="h-4 bg-background-dark rounded w-10"></div>
        <span>/</span>
        <div className="h-4 bg-background-dark rounded w-16"></div>
        <span>/</span>
        <div className="h-4 bg-background-dark rounded w-32"></div>
      </div>

      <div className="flex flex-col md:flex-row gap-6">
        {/* 左侧封面区域 */}
        <div className="flex-shrink-0 w-full md:w-48 lg:w-64">
          <div className="relative aspect-[3/4] w-full overflow-hidden rounded-lg shadow-lg bg-background-dark"></div>
        </div>

        {/* 右侧视频信息 */}
        <div className="flex-grow">
          <div className="h-4 bg-background-dark rounded w-12"></div>
          <span className="mx-2 text-gray-500">/</span>
          <div className="h-4 bg-background-dark rounded w-16"></div>

          {/* 标题和标签 */}
          <div className="mt-4">
            <h1 className="mb-2">
              <div className="h-7 bg-background-dark rounded w-3/4 mb-4"></div>
            </h1>
            <div className="h-6 bg-background-dark rounded-full w-24 mb-4"></div>
          </div>

          {/* 元数据项目 */}
          <div className="flex flex-wrap items-center text-sm mb-1">
            <div className="h-4 bg-background-dark rounded w-10 md:w-12 mr-2"></div>
            <div className="h-4 bg-background-dark rounded flex-grow"></div>
          </div>

          {/* 上映状态 */}
          <div className="mt-4"></div>
        </div>
      </div>

      {/* 简介部分 */}
      <div className="mt-6">
        <div className="h-5 bg-background-dark rounded w-24"></div>
        <div className="mt-2 space-y-2">
          <div className="h-4 bg-background-dark rounded w-full"></div>
          <div className="h-4 bg-background-dark rounded w-full"></div>
          <div className="h-4 bg-background-dark rounded w-3/4"></div>
        </div>
      </div>

      {/* 猜你喜欢 */}
      <div className="mt-8">
        <div className="h-5 bg-background-dark rounded w-24"></div>
        {/* ... 推荐内容 ... */}
      </div>
    </div>
  );
} 